<script lang="ts" setup>
defineOptions({ name: 'WorkingWithData' });

import { ref, onBeforeMount } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

const gridApi = ref();
const defaultColDef = ref({
    filter: "agTextColumnFilter",
    floatingFilter: true,
});
const rowData = ref();
const rowSelection = ref('');
const paginationPageSize = ref(0);
const paginationPageSizeSelector = ref();

const columnDefs = ref([
    {
        headerName: '制造厂商',
        field: "make",
        checkboxSelection: true, // 该列附带复选框
        editable: true, // 该列可双击编辑
        cellEditor: "agSelectCellEditor", // Ag-Grid内置表格编辑组件
        cellEditorParams: { // 传给上述编辑组件的参数
            values: [
                "Tesla",
                "Ford",
                "Toyota",
                "Mercedes",
                "Fiat",
                "Nissan",
                "Vauxhall",
                "Volvo",
                "Jaguar",
            ],
        },
    },
    { headerName: "型号", field: "model" },
    { headerName: "价格", field: "price", filter: "agNumberColumnFilter" },
    { headerName: "是否电动", field: "electric" },
    {
        headerName: "月份",
        field: "month",
        comparator: (valueA, valueB) => {
            const months = [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December",
            ];
            const idxA = months.indexOf(valueA);
            const idxB = months.indexOf(valueB);
            return idxA - idxB;
        },
    },
]);

onBeforeMount(() => {
    rowData.value = [
        {
            make: "Tesla",
            model: "Model Y",
            price: 64950,
            electric: true,
            month: "June",
        },
        {
            make: "Ford",
            model: "F-Series",
            price: 33850,
            electric: false,
            month: "October",
        },
        {
            make: "Toyota",
            model: "Corolla",
            price: 29600,
            electric: false,
            month: "August",
        },
        {
            make: "Mercedes",
            model: "EQA",
            price: 48890,
            electric: true,
            month: "February",
        },
        {
            make: "Fiat",
            model: "500",
            price: 15774,
            electric: false,
            month: "January",
        },
        {
            make: "Nissan",
            model: "Juke",
            price: 20675,
            electric: false,
            month: "March",
        },
        {
            make: "Vauxhall",
            model: "Corsa",
            price: 18460,
            electric: false,
            month: "July",
        },
        {
            make: "Volvo",
            model: "EX30",
            price: 33795,
            electric: true,
            month: "September",
        },
        {
            make: "Mercedes",
            model: "Maybach",
            price: 175720,
            electric: false,
            month: "December",
        },
        {
            make: "Vauxhall",
            model: "Astra",
            price: 25795,
            electric: false,
            month: "April",
        },
        {
            make: "Fiat",
            model: "Panda",
            price: 13724,
            electric: false,
            month: "November",
        },
        {
            make: "Jaguar",
            model: "I-PACE",
            price: 69425,
            electric: true,
            month: "May",
        },
        {
            make: "Tesla",
            model: "Model Y",
            price: 64950,
            electric: true,
            month: "June",
        },
        {
            make: "Ford",
            model: "F-Series",
            price: 33850,
            electric: false,
            month: "October",
        },
        {
            make: "Toyota",
            model: "Corolla",
            price: 29600,
            electric: false,
            month: "August",
        },
        {
            make: "Mercedes",
            model: "EQA",
            price: 48890,
            electric: true,
            month: "February",
        },
        {
            make: "Fiat",
            model: "500",
            price: 15774,
            electric: false,
            month: "January",
        },
        {
            make: "Nissan",
            model: "Juke",
            price: 20675,
            electric: false,
            month: "March",
        },
        {
            make: "Vauxhall",
            model: "Corsa",
            price: 18460,
            electric: false,
            month: "July",
        },
        {
            make: "Volvo",
            model: "EX30",
            price: 33795,
            electric: true,
            month: "September",
        },
        {
            make: "Mercedes",
            model: "Maybach",
            price: 175720,
            electric: false,
            month: "December",
        },
        {
            make: "Vauxhall",
            model: "Astra",
            price: 25795,
            electric: false,
            month: "April",
        },
        {
            make: "Fiat",
            model: "Panda",
            price: 13724,
            electric: false,
            month: "November",
        },
        {
            make: "Jaguar",
            model: "I-PACE",
            price: 69425,
            electric: true,
            month: "May",
        },
        {
            make: "Tesla",
            model: "Model Y",
            price: 64950,
            electric: true,
            month: "June",
        },
        {
            make: "Ford",
            model: "F-Series",
            price: 33850,
            electric: false,
            month: "October",
        },
        {
            make: "Toyota",
            model: "Corolla",
            price: 29600,
            electric: false,
            month: "August",
        },
        {
            make: "Mercedes",
            model: "EQA",
            price: 48890,
            electric: true,
            month: "February",
        },
        {
            make: "Fiat",
            model: "500",
            price: 15774,
            electric: false,
            month: "January",
        },
        {
            make: "Nissan",
            model: "Juke",
            price: 20675,
            electric: false,
            month: "March",
        },
        {
            make: "Vauxhall",
            model: "Corsa",
            price: 18460,
            electric: false,
            month: "July",
        },
        {
            make: "Volvo",
            model: "EX30",
            price: 33795,
            electric: true,
            month: "September",
        },
        {
            make: "Mercedes",
            model: "Maybach",
            price: 175720,
            electric: false,
            month: "December",
        },
        {
            make: "Vauxhall",
            model: "Astra",
            price: 25795,
            electric: false,
            month: "April",
        },
        {
            make: "Fiat",
            model: "Panda",
            price: 13724,
            electric: false,
            month: "November",
        },
        {
            make: "Jaguar",
            model: "I-PACE",
            price: 69425,
            electric: true,
            month: "May",
        },
    ];
    rowSelection.value = "multiple";
    paginationPageSize.value = 10;
    paginationPageSizeSelector.value = [10, 25, 50];
});

const onGridReady = (params) => {
    gridApi.value = params.api;
};
</script>

<template>
    <!-- The AG Grid component -->
    <div style="width: 100%; height: 500px">
        <ag-grid-vue style="width: 100%; height: 100%;" class="ag-theme-alpine" :columnDefs="columnDefs"
            @grid-ready="onGridReady" :rowData="rowData" :defaultColDef="defaultColDef" :rowSelection="rowSelection"
            :suppressRowClickSelection="true" :pagination="true" :paginationPageSize="paginationPageSize"
            :paginationPageSizeSelector="paginationPageSizeSelector"></ag-grid-vue>
    </div>
</template>